import { Row, Col, Icon } from 'antd';
import './index.less';

class CrmShowGroup extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      showGroup: props.showGroup ? props.showGroup : false,
    };
  }

  render() {
    const { title, leftComponent = [], rightComponent = [], children, btnspace } = this.props;
    const { showGroup } = this.state;
    return (
      <div className={`${this.props.className || ''}`}>
        <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@jinhkm`} className="crm-exchange-title">
          <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@lxb68u`} span="18" className="crm-exchange-title-left">
            <div>{leftComponent}</div>
          </Col>
          <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@i3ji9m`} span="6" className="crm-exchange-title-right" >
            <span style={{ marginRight: '10px' }}>{rightComponent}</span>
            <i className={showGroup ? 'icon-coms-up' : 'icon-coms-down'} onClick={() => this.setState({ showGroup: !showGroup })} />
          </Col>
        </Row>
        <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@prjfg7`} className="crm-exchange-content" style={{ display: showGroup ? 'block' : 'none' }}>
          {
            children
          }
        </Row>
      </div>
    );
  }
}

export default CrmShowGroup;
